<template>
	<view class="" class="all" :style="{'height':widHeight +'px' }">
		<!-- 添加地址 -->
		<view class="addr" @click="inserAddr">
			<view class="contact-icon">
				<view class="icon">
					<image mode="aspectFit" src="../../static/加号.png"></image>
				</view>
				<view class="contact">
					<view class="contact-person">
						<text class="contact-tel">添加地址</text>
					</view>
				</view>
			</view>
			<view class="u-icon">
				<u-icon name="arrow-right" color="#000" size="15"></u-icon>
			</view>
		</view>
		<view  v-if='address.length > 0'>
	

			<!-- 地址列表 -->
			<view class="addr" v-for="(item,index) in address" :key="index">
				<view class="contact-icon">
					<view class="icon">
						<uni-icons type="auth" size="18"></uni-icons>
					</view>
					<view class="contact">
						<view class="contact-person">
							<text>{{item.userName}}</text>
							<text class="contact-tel">{{item.telNumber}}</text>
						</view>
						<view class="contact-addr">

							<view class="contact-text">{{item.provinceName}} {{item.cityName}} {{item.countyName}}</view>
							<view class="contact-text">{{item.detailInfo}}</view>
						</view>
					</view>
				</view>
				<view class="u-icon">
					<u-icon name="arrow-right" color="#000" size="15"></u-icon>
				</view>
			</view>


		</view>

		<view class="" v-else>
			<myEmpty mode="address" :IfShowBut='false' :windowHeight="150"></myEmpty>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				widHeight: 0
			};
		},
		computed: {
			...mapState("address", ["address"])
		},
		mounted() {
			uni.$setNavigationBarColor()
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		methods: {
			...mapMutations('address', ['addAddress']),
			inserAddr() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.address']) {
							uni.authorize({
								scope: 'scope.address',
								success: (res) => {
									uni.$showToast('地址授权成功')
									// 用户已经同意小程序使用录音功能，后续调用 uni.startRecord 接口不会弹窗询问
									uni.chooseAddress({
										success: (res) => {
											this.addAddress(res)
											this.addr = this.address
										}
									})
								},
								fail: (err) => {
									uni.$showToast('您取消了地址授权！', "error")
								}
							})
						} else {
							uni.chooseAddress({
								success: (res) => {
									this.addAddress(res)
									this.addr = this.address
								}
							})
						}
					},
					fail: (err) => {
						uni.$showToast('您取消了地址授权！', "error")
					}
				})

			}
		},
	}
</script>

<style lang="scss">
	.all {
		background-color: #f7f8fa;
	}

	.addr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		color: #000;
		padding: 0 20px;
		margin-bottom: 20px;
		height: 150rpx;


		.contact-icon {
			width: 80%;
			display: flex;
			align-items: center;

			.contact {
				margin: 0 10px;
				display: flex;

				flex-direction: column;
				font-size: 28rpx;

				.contact-person {
					.contact-tel {
						padding-left: 10rpx
					}
				}
			}

			.icon {

				image {
					width: 70rpx;
					height: 70rpx;

				}
			}
		}


	}
</style>